<template>
  <div class="edit-enterprise-detail" v-if="props.showDialog">
    <Dialog
      diaTop="0.3"
      headerName="更换"
      :showDialog="true"
      @close="close"
      @save="save"
      saveLetter="保存"
      diaWidth="62"
      footerTop="10"
    >
      <template #content>
        <div class="content-wrap">
          <el-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            label-width="166px"
          >
            <el-row :gutter="10" style="margin-bottom: 0px">
              <el-col :span="12">
                <el-form-item label="设施名称：" prop="devicename">
                  <el-input clearable v-model="formData.devicename" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设施编号：" prop="devicecode">
                  <el-input clearable v-model="formData.devicecode" />
                </el-form-item>
              </el-col>
            </el-row>
            <div
              style="
                background-color: #f7f7f7;
                border: 1px dashed #d8d5d5;
                width: 100%;
              "
            >
              <el-row :gutter="10" style="padding-top: 15px">
                <el-col :span="12">
                  <el-form-item label="涉废类型：" prop="wastetype">
                    <el-select
                      v-model="formData.wastetype"
                      clearable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in wasteList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="危废代码：" prop="wastecode">
                    <el-select
                      v-model="formData.wastecode"
                      clearable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in wasteCodeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="本次更换量：" prop="putoutnum">
                    <el-input clearable v-model="formData.putoutnum" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="本次填充量：" prop="putinnum">
                    <el-input clearable v-model="formData.putinnum" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="碘值：" prop="dianval">
                    <el-input clearable v-model="formData.dianval" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="使用周期：" prop="circledays">
                    <el-input clearable v-model="formData.circledays" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item
                    label="预计更换时间："
                    prop="nextchangedate"
                    label-width="168px"
                  >
                    <el-date-picker
                      disabled
                      v-model="formData.nextchangedate"
                      type="date"
                      clearable
                      placeholder="请选择"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <!-- <el-form-item label="更换周期：" prop="permitNumber">
                  <el-input clearable v-model="formData.permitNumber" />
                </el-form-item> -->
                </el-col>
              </el-row>
            </div>

            <el-row :gutter="10" style="margin-top: 10px">
              <el-col :span="12">
                <el-form-item label="更换前照片：" prop="changebeforeimgurl">
                  <Upload @successImg="handleChangebeforeimgurl">
                    <template #content>
                      <div class="img-wrap">
                        <div
                          class="content"
                          v-if="changebeforeimgurl.length > 0"
                        >
                          <div
                            class="box"
                            v-for="(item, index) in changebeforeimgurl"
                            :key="item"
                          >
                            <img
                              @click.stop="
                                searchImage(changebeforeimgurl, index)
                              "
                              :src="item"
                              alt=""
                            />
                            <div
                              class="del"
                              @click.stop="
                                delArrItem(changebeforeimgurl, index)
                              "
                            >
                              ✕
                            </div>
                          </div>
                        </div>
                        <button v-else>点击上传</button>
                      </div>
                    </template>
                  </Upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="更换中照片：" prop="changemidimgurl">
                  <Upload @successImg="handleChangemidimgurl">
                    <template #content>
                      <div class="img-wrap">
                        <div class="content" v-if="changemidimgurl.length > 0">
                          <div
                            class="box"
                            v-for="(item, index) in changemidimgurl"
                            :key="item"
                          >
                            <img
                              @click.stop="searchImage(changemidimgurl, index)"
                              :src="item"
                              alt=""
                            />
                            <div
                              class="del"
                              @click.stop="delArrItem(changemidimgurl, index)"
                            >
                              ✕
                            </div>
                          </div>
                        </div>
                        <button v-else>点击上传</button>
                      </div>
                    </template>
                  </Upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="margin-top: 10px">
              <el-col :span="12">
                <el-form-item label="更换后照片：" prop="changeafterimgurl">
                  <Upload @successImg="handleChangeafterimgurl">
                    <template #content>
                      <div class="img-wrap">
                        <div
                          class="content"
                          v-if="changeafterimgurl.length > 0"
                        >
                          <div
                            class="box"
                            v-for="(item, index) in changeafterimgurl"
                            :key="item"
                          >
                            <img
                              @click.stop="
                                searchImage(changeafterimgurl, index)
                              "
                              :src="item"
                              alt=""
                            />
                            <div
                              class="del"
                              @click.stop="delArrItem(changeafterimgurl, index)"
                            >
                              ✕
                            </div>
                          </div>
                        </div>
                        <button v-else>点击上传</button>
                      </div>
                    </template>
                  </Upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="碘值检测报告："
                  prop="imgdianvalurl"
                  label-width="168px"
                >
                  <Upload @successImg="handleImgdianvalurl">
                    <template #content>
                      <div class="img-wrap">
                        <div class="content" v-if="imgdianvalurl.length > 0">
                          <div
                            class="box"
                            v-for="(item, index) in imgdianvalurl"
                            :key="item"
                          >
                            <img
                              @click.stop="searchImage(imgdianvalurl, index)"
                              :src="item"
                              alt=""
                            />
                            <div
                              class="del"
                              @click.stop="delArrItem(imgdianvalurl, index)"
                            >
                              ✕
                            </div>
                          </div>
                        </div>
                        <button v-else>点击上传</button>
                      </div>
                    </template>
                  </Upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="margin-top: 10px">
              <el-col :span="12">
                <el-form-item
                  label="相关发票图片："
                  prop="imgticketurl"
                  label-width="168px"
                >
                  <Upload @successImg="handleImgticketurl">
                    <template #content>
                      <div class="img-wrap">
                        <div class="content" v-if="imgticketurl.length > 0">
                          <div
                            class="box"
                            v-for="(item, index) in imgticketurl"
                            :key="item"
                          >
                            <img
                              @click.stop="searchImage(imgticketurl, index)"
                              :src="item"
                              alt=""
                            />
                            <div
                              class="del"
                              @click.stop="delArrItem(imgticketurl, index)"
                            >
                              ✕
                            </div>
                          </div>
                        </div>
                        <button v-else>点击上传</button>
                      </div>
                    </template>
                  </Upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="入库暂存图片："
                  prop="imgstockkeepurl"
                  label-width="168px"
                >
                  <Upload @successImg="handleImgstockkeepurl">
                    <template #content>
                      <div class="img-wrap">
                        <div class="content" v-if="imgstockkeepurl.length > 0">
                          <div
                            class="box"
                            v-for="(item, index) in imgstockkeepurl"
                            :key="item"
                          >
                            <img
                              @click.stop="searchImage(imgstockkeepurl, index)"
                              :src="item"
                              alt=""
                            />
                            <div
                              class="del"
                              @click.stop="delArrItem(imgstockkeepurl, index)"
                            >
                              ✕
                            </div>
                          </div>
                        </div>
                        <button v-else>点击上传</button>
                      </div>
                    </template>
                  </Upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
    </Dialog>
    <!-- 图片预览 -->
    <el-image-viewer
      v-if="showImg"
      @close="showImg = false"
      :url-list="srcList"
    />
  </div>
</template>
<script setup>
import Dialog from "@/components/DialogCross";
import Upload from "@/components/Upload";
import dayjs from "dayjs";
import http from "@http";
import { ElMessage } from "element-plus";
let wasteCodeList = ref([]);
let wasteList = ref([]);
let emit = defineEmits(["update:showDialog", "save", "update:isAdd"]);
let params = reactive({});
let formRef = ref(null);
let formData = reactive({
  devicename: "",
  devicecode: "",
  wastetype: "",
  wastecode: "",
  putoutnum: "",
  putinnum: "",
  dianval: "",
  circledays: "",
  nextchangedate: dayjs().format("YYYY-MM-DD"),
  changebeforeimgurl: "",
  changemidimgurl: "",
  changeafterimgurl: "",
  imgdianvalurl: "",
  imgticketurl: "",
  imgstockkeepurl: "",
});
let changebeforeimgurl = ref([]);
let changemidimgurl = ref([]);
let showImg = ref(false);
let srcList = ref([]);
let changeafterimgurl = ref([]);
let imgdianvalurl = ref([]);
let imgticketurl = ref([]);
let imgstockkeepurl = ref([]);
let props = defineProps([
  "showDialog",
  "wasteList",
  "updateMsg",
  "updateItem",
  "isAdd",
]);
let searchImage = (url, index) => {
  showImg.value = true;
  srcList.value = [url[index]];

  let urls = url;
  urls.map((item, idx) => {
    if (idx != index) {
      srcList.value.push(item);
    }
  });
};
watch(
  () => props.updateItem,
  (newVal) => {
    changebeforeimgurl.value = newVal.changebeforeimgurl.split(",");
    changemidimgurl.value = newVal.changemidimgurl.split(",");
    changeafterimgurl.value = newVal.changeafterimgurl.split(",");
    imgdianvalurl.value = newVal.imgdianvalurl.split(",");
    imgticketurl.value = newVal.imgticketurl.split(",");
    imgstockkeepurl.value = newVal.imgstockkeepurl.split(",");

    for (let key in newVal) {
      formData[key] = newVal[key];
    }
    console.log("2222");
  },
  { deep: true }
);
watch(
  () => formData.circledays,
  (newVal) => {
    console.log(newVal);
    formData.nextchangedate = dayjs().add(newVal, "day").format("YYYY-MM-DD");
  }
);
let handleChangebeforeimgurl = (e) => {
  if (e && changebeforeimgurl.value.length < 3) {
    changebeforeimgurl.value.push(e);
  } else {
    ElMessage("最多上传三张图片");
  }
};
let handleChangemidimgurl = (e) => {
  if (e && changemidimgurl.value.length < 3) {
    changemidimgurl.value.push(e);
  } else {
    ElMessage("最多上传三张图片");
  }
};
let handleChangeafterimgurl = (e) => {
  if (e && changeafterimgurl.value.length < 3) {
    changeafterimgurl.value.push(e);
  } else {
    ElMessage("最多上传三张图片");
  }
};
let handleImgdianvalurl = (e) => {
  if (e && imgdianvalurl.value.length < 3) {
    imgdianvalurl.value.push(e);
  } else {
    ElMessage("最多上传三张图片");
  }
};
let delArrItem = (url, index) => {
  url.splice(index, 1);
};
let handleImgticketurl = (e) => {
  if (e && imgticketurl.value.length < 3) {
    imgticketurl.value.push(e);
  } else {
    ElMessage("最多上传三张图片");
  }
};
let handleImgstockkeepurl = (e) => {
  if (e && imgstockkeepurl.value.length < 3) {
    imgstockkeepurl.value.push(e);
  } else {
    ElMessage("最多上传三张图片");
  }
};

watch(
  () => props.wasteList,
  (newVal) => {
    wasteList.value = newVal;
  },
  { immediate: true, deep: true }
);

let close = () => {
  emit("update:showDialog", false);
  emit("update:isAdd", false);
};

watch(
  () => props.updateMsg,
  (newVal) => {
    nextTick(() => {
      if (!props.isAdd) return;
      formRef.value.resetFields();
      for (let key in formData) {
        delete formData[key];
      }
      changebeforeimgurl.value = [];
      changemidimgurl.value = [];
      changeafterimgurl.value = [];
      imgdianvalurl.value = [];
      imgticketurl.value = [];
      imgstockkeepurl.value = [];
      formData.circledays = "";
      formData.dianval = "";
      formData.nextchangedate = "";
      formData.putinnum = "";
      formData.putoutnum = "";
      formData.wastecode = "";
      formData.devicename = "";
      formData.devicecode = "";

      formData.wastetype = "";
      formData.devicename = newVal.name;
      formData.devicecode = newVal.code;

      formData.wastetype = String(newVal.type);
    });
  },
  { deep: true, immediate: true }
);
let save = () => {
  formData.changebeforeimgurl = changebeforeimgurl.value.join(",");
  formData.changemidimgurl = changemidimgurl.value.join(",");
  formData.changeafterimgurl = changeafterimgurl.value.join(",");
  formData.imgdianvalurl = imgdianvalurl.value.join(",");
  formData.imgticketurl = imgticketurl.value.join(",");
  formData.imgstockkeepurl = imgstockkeepurl.value.join(",");
  console.log(formData, "formData");
  formRef.value.validate((valid) => {
    if (valid) {
      http({ url: "/stock/addOrUpdate", data: formData }).then((res) => {
        if (res.code == 0) {
          formData.circledays = "";
          formData.dianval = "";
          formData.nextchangedate = "";
          formData.putinnum = "";
          formData.putoutnum = "";
          formData.wastecode = "";
          formData.devicename = "";
          formData.devicecode = "";

          formData.wastetype = "";

          emit("save");
        }
      });
    }
  });
};

let rules = {
  devicename: [
    {
      required: true,
      message: "设施名称不能为空",
      trigger: "blur",
    },
  ],
  devicecode: [
    {
      required: true,
      message: "设施编号不能为空",
      trigger: "blur",
    },
  ],
  wastetype: [
    {
      required: true,
      message: "涉废类型不能为空",
      trigger: "blur",
    },
  ],
  wastecode: [
    {
      required: true,
      message: "危废代码不能为空",
      trigger: "blur",
    },
  ],
  putoutnum: [
    {
      required: true,
      message: "本次更换量不能为空",
      trigger: "blur",
    },
  ],
  putinnum: [
    {
      required: true,
      message: "本次填充量不能为空",
      trigger: "blur",
    },
  ],
  dianval: [
    {
      required: true,
      message: "碘值不能为空",
      trigger: "blur",
    },
  ],
  circledays: [
    {
      required: true,
      message: "使用周期不能为空",
      trigger: "blur",
    },
  ],
  nextchangedate: [
    {
      required: true,
      message: "预计更换时间不能为空",
      trigger: "blur",
    },
  ],
  changebeforeimgurl: [
    {
      required: true,
      message: "更换前照片不能为空",
      trigger: "blur",
    },
  ],
  changemidimgurl: [
    {
      required: true,
      message: "更换中照片不能为空",
      trigger: "blur",
    },
  ],
  changeafterimgurl: [
    {
      required: true,
      message: "更换后照片不能为空",
      trigger: "blur",
    },
  ],
  imgdianvalurl: [
    {
      required: true,
      message: "碘值检测报告不能为空",
      trigger: "blur",
    },
  ],
  imgticketurl: [
    {
      required: true,
      message: "相关发票图片不能为空",
      trigger: "blur",
    },
  ],
  imgstockkeepurl: [
    {
      required: true,
      message: "入库暂存图片不能为空",
      trigger: "blur",
    },
  ],
};
http({ url: "/wasteCode/getListItems" }).then((res) => {
  if (res.code == 0) {
    wasteCodeList.value = res.data.map((item) => {
      return {
        label: item.wastecode + "(" + item.wastetypename + ")",
        value: item.wastecode,
      };
    });
  }
});
</script>
<style lang="scss" scoped>
/* 编辑企业详情页面 */
.edit-enterprise-detail {
  .content-wrap {
    padding-right: 10px;

    .facility-code {
      img {
        width: 182px;
        height: 226px;
      }
    }

    .img-wrap {
      width: 344px;
      height: 103px;
      background: #f7f7f7;
      border-radius: 5px;
      border: 1px solid #bfbfbf;
      display: flex;
      justify-content: center;
      align-items: center;

      button {
        margin-top: 5px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 20px;
        color: #0874fa;
      }

      .content {
        display: flex;
        width: 330px;
        // justify-content:space-around;
        align-items: center;
        .box:first-child {
          margin-left: 8px !important;
        }
        .box {
          height: 80px;
          width: 95px;
          position: relative;
          display: flex;
          margin-left: 15px;

          img {
            height: 80px;
            width: 95px;
          }

          img:first-child {
          }
          .del {
            width: 20px !important;
            height: 20px !important;
            background: #989a9e;
            position: absolute;
            border-radius: 50%;
            right: -10px !important;
            top: -10px !important;
            color: #ffffff;
            display: flex;

            align-items: center;
            justify-content: center;
            z-index: 99999999999999;
          }
        }
      }
    }
  }

  :deep(.el-form-item__label) {
    font-family: Source Han Sans CN;
    font-weight: 500 !important;
    font-size: 20px !important;
    color: #000 !important;
  }

  :deep(.el-input) {
    width: 344px;

    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #666666 !important;
  }
  :deep(.el-input__wrapper) {
    width: 344px !important;
  }
  :deep(.el-select) {
    /* width: 344px !important; */
    width: 100% !important;

    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #666666 !important;
  }

  :deep(.el-input__inner) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #333;
  }

  :deep(.el-input) {
    width: 344px !important;
  }

  :deep(.el-input__wrapper, .el-textarea__inner) {
    box-shadow: none;
    font-family: Source Han Sans CN;
    font-weight: 400 !important;
    font-size: 18px !important;
    color: #666666 !important;
    background: #fff !important;
    border-radius: 5px !important;
    border: 1px solid #bfbfbf !important;

    height: 37px !important;
  }

  :deep(.el-input__inner::placeholder) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #999999;
  }
}
</style>
